<template>
  <!-- 查询 -->
  <div>
    <el-input placeholder="请输入客户ID" style="width:200px" v-model="queryCustomerId"></el-input>
    <el-button @click="queryByCustomerId" type="success" plain>查询</el-button>
    <el-button @click="showOutwardDialog" type="primary" style="width: 100px; margin-left: 50px;font-weight: bolder; font-size: 16px">
      登&emsp;记
    </el-button>
  </div>
  <!-- 显示所有外出信息 -->
  <div>{{errorMessage}}</div>
  <el-table :data="outwardList">
    <el-table-column label="序号" type="index" width="60px"></el-table-column>
    <el-table-column prop="id" label="ID" width="60px"></el-table-column>
    <el-table-column prop="customerId" label="客户ID" width="80px"></el-table-column>
    <el-table-column prop="outgoingreason" label="外出事由" width="100px"></el-table-column>
    <el-table-column prop="outgoingtime" label="外出时间" width="100px" :formatter="formatDate"></el-table-column>
    <el-table-column prop="expectedreturntime" label="预计回院时间" width="110px" :formatter="formatDate"></el-table-column>
    <el-table-column prop="actualreturntime" label="实际回院时间" width="110px" :formatter="formatDate"></el-table-column>
    <el-table-column prop="escorted" label="陪同人" width="70px"></el-table-column>
    <el-table-column prop="relation" label="与老人关系" width="100px"></el-table-column>
    <el-table-column prop="escortedtel" label="陪同人电话" width="120px"></el-table-column>
    <el-table-column prop="auditstatus" label="审批状态" width="100px">
      <template #default="scope">
        {{scope.row.auditstatus === 0 ? '已提交' : scope.row.auditstatus === 1 ? '同意' : '拒绝'}}
      </template>
    </el-table-column>
    <el-table-column prop="auditperson" label="审批人" width="70px"></el-table-column>
    <el-table-column prop="audittime" label="审批时间" width="100px" :formatter="formatDate"></el-table-column>
    <el-table-column prop="remarks" label="备注" width="60px"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="showEditDialog(scope.row.id)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="example-pagination-block">
    <el-pagination background
                   v-model:current-page="pageContains.pageNum"
                   v-model:page-size="pageContains.pageSize"
                   :page-sizes="[10,20,30,50,100]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageContains.total"
                   @size-change="handleSizeChange"
                   @current-change="handlePageChange"
    />
  </div>

  <!-- 外出信息对话框 -->
  <el-dialog v-model="outwardDialog" :title="dialogTitle">
    <el-form :model="curOutward">
      <el-form-item label="客户ID">
        <el-col :span="11">
          <el-input v-model="curOutward.customerId"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="外出事由">
        <el-col :span="11">
          <el-input v-model="curOutward.outgoingreason"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="外出时间">
        <el-col :span="11">
          <el-date-picker v-model="curOutward.outgoingtime"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="预计回院时间">
        <el-col :span="11">
          <el-date-picker v-model="curOutward.expectedreturntime"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="实际回院时间">
        <el-col :span="11">
          <el-date-picker v-model="curOutward.actualreturntime"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="陪同人">
        <el-col :span="11">
          <el-input v-model="curOutward.escorted"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="与老人关系">
        <el-col :span="11">
          <el-input v-model="curOutward.relation"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="陪同人电话">
        <el-col :span="11">
          <el-input v-model="curOutward.escortedtel"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="审批状态">
        <el-col :span="11">
          <el-select v-model="curOutward.auditstatus">
            <el-option label="已提交" :value="0"></el-option>
            <el-option label="同意" :value="1"></el-option>
            <el-option label="拒绝" :value="2"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="审批人">
        <el-col :span="11">
          <el-input v-model="curOutward.auditperson"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="审批时间">
        <el-col :span="11">
          <el-date-picker v-model="curOutward.audittime"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="备注">
        <el-col :span="11">
          <el-input v-model="curOutward.remarks"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <el-button @click="optOne()">{{buttonOpt}}</el-button>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted, reactive} from "vue";
import http from '@/axios/http';
import qs from "qs";

// 存放外出数据集合
let outwardList = ref([]);

// 报错提示
let errorMessage = ref("");

// 模糊查询绑定的 客户ID
let queryCustomerId = ref("");

// 对话框显示控制
let outwardDialog = ref(false);

// 外出信息，或者编辑已有外出的 绑定数据
let curOutward = ref({});

// 登记、修改外出信息弹出框的 标题和操作按钮  显示文字
let dialogTitle = reactive("");
let buttonOpt = reactive("");

// 对话框操作类型：1：添加 2：编辑
let dialogOptType = reactive(1);

// 分页相关
let size = 10; // 当前显示多少行
let pageNum = 1; // 当前页码
let pageSize = 10; // 每页显示行数

// 当前页码信息
let pageContains = ref({});

// 格式化日期
function formatDate(row, column) {
  let data = row[column.property];
  if (data == null) {
    return null;
  }
  let dt = new Date(data);
  return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
}

// 根据客户ID查询外出信息
function queryByCustomerId() {
  let param = {
    customerId: queryCustomerId.value
  };
  http.post('/lyy/get_outwards_by_customer_id', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          outwardList.value = result.data.list;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 显示外出登记对话框
function showOutwardDialog() {
  dialogTitle = "外出登记";
  buttonOpt = "录入";
  outwardDialog.value = true;
  dialogOptType = 1; // 设置当前操作类型标志是 录入
}

// 关闭外出信息对话框
function closeOutwardDialog() {
  outwardDialog.value = false;
}

// 页面初始化
onMounted(() => {
  init();
});

function init() {
  getAllOutwards();
}

// 查询所有外出信息
function getAllOutwards() {
  let params = {
    size: size,
    pageNum: pageNum,
    pageSize: pageSize
  };
  http.post('/lyy/get_all_outwards', params).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          pageContains.value = result.data;
          outwardList.value = result.data.list;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 添加一条外出记录
function addOutward() {
  let param = curOutward.value;
  http.post('/lyy/add_one_outward', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          closeOutwardDialog();
          getAllOutwards();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 显示编辑对话框
function showEditDialog(outwardId) {
  getOutwardInfo(outwardId);
  outwardDialog.value = true;
  dialogTitle = "编辑外出信息";
  buttonOpt = "修改";
  dialogOptType = 2; // 设置当前操作类型标志是 修改
}

// 根据ID查询外出信息
function getOutwardInfo(outwardId) {
  let param = {
    id: outwardId
  };
  http.post('/lyy/get_outward_by_id', qs.stringify(param)).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          curOutward.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 删除外出记录
function removeOne(outwardId) {
  let param = {
    id: outwardId
  };
  http.post('/lyy/remove_outward_by_id', qs.stringify(param)).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          getAllOutwards();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 修改外出记录
function editOutward() {
  let param = curOutward.value;
  http.post('/lyy/modify_outward_by_id', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          closeOutwardDialog();
          getAllOutwards();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 操作方法
function optOne() {
  if (dialogOptType === 1) {
    addOutward();
  } else if (dialogOptType === 2) {
    editOutward();
  }
}

// 分页处理
const handlePageChange = (pageNum1) => {
  pageNum = pageNum1;
  getAllOutwards();
};

const handleSizeChange = (pageSize1) => {
  pageSize = pageSize1;
  getAllOutwards();
};
</script>

<style scoped>
</style>